<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据分析平台</title>
    <!-- 引入Chart.js -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <!-- 引入Element UI样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: Arial, sans-serif;
            height: 100vh;
            display: flex;
            flex-direction: column;
            background-color: #f0f2f5;
        }
        
        /* 顶部样式 */
        .header {
            height: 60px;
            background-color: #fdadd2;
            color: white;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 20px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
        }
        
        .header h2 {
            font-size: 20px;
        }
        
        /* 下拉菜单样式 */
        .el-dropdown-link {
            color: white;
            cursor: pointer;
            display: flex;
            align-items: center;
        }
        
        .el-dropdown-menu {
            background-color: white;
            border-radius: 4px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        }
        
        .el-dropdown-menu__item {
            padding: 0 20px;
            line-height: 36px;
        }
        
        /* 中间内容区样式 */
        .content {
            flex: 1;
            overflow: auto;
            padding: 15px;
        }
        
        /* 九宫格样式 */
        .chart-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-auto-rows: minmax(30vh, 1fr);
            gap: 15px;
            width: 100%;
            min-height: calc(100vh - 110px); /* 减去头部和底部高度 */
        }
        
        .chart-container {
            background-color: white;
            position: relative;
            padding: 8px;
            border-radius: 5px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
            display: flex;
            flex-direction: column;
            min-height: 30vh;
        }
        
        .chart-title {
            font-size: 14px;
            font-weight: bold;
            color: #333;
            margin-bottom: 5px;
            text-align: center;
            padding: 5px 0;
        }
        
        .chart-wrapper {
            flex: 1;
            position: relative;
            min-height: 200px;
        }
        
        canvas {
            width: 100% !important;
            height: 100% !important;
            display: block;
        }
        
        /* 底部样式 */
        .footer {
            height: 50px;
            background-color: #f5f7fa;
            display: flex;
            justify-content: center;
            align-items: center;
            border-top: 1px solid #e6e6e6;
            font-size: 14px;
            color: #909399;
        }
        
        /* 隐藏的下拉菜单 */
        #dropdown-menu {
            display: none;
            position: absolute;
            right: 20px;
            top: 60px;
            background: white;
            min-width: 120px;
            border-radius: 4px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
            z-index: 100;
        }
        
        #dropdown-menu.show {
            display: block;
        }
        
        .dropdown-item {
            padding: 10px 15px;
            cursor: pointer;
            color: #606266;
        }
        
        .dropdown-item:hover {
            background-color: #f5f7fa;
            color: #409EFF;
        }
    </style>
</head>
<body>
    <!-- 顶部区域 -->
    <div class="header">
        <h2>数据分析平台</h2>
        <div class="right-section">
            <div id="dropdown-trigger" class="el-dropdown-link">
                菜单 ▼
            </div>
            <div id="dropdown-menu">
                <div class="dropdown-item">数据设置</div>
                <div class="dropdown-item">图表配置</div>
                <div class="dropdown-item">导出报表</div>
            </div>
        </div>
    </div>
    
    <!-- 中间内容区 -->
    <div class="content">
        <div class="chart-grid">
            <!-- 图表1: 柱状图 -->
            <div class="chart-container">
                <div class="chart-title">柱状图</div>
                <div class="chart-wrapper">
                    <canvas id="chart1"></canvas>
                </div>
            </div>
            
            <!-- 图表2: 折线图 -->
            <div class="chart-container">
                <div class="chart-title">折线图</div>
                <div class="chart-wrapper">
                    <canvas id="chart2"></canvas>
                </div>
            </div>
            
            <!-- 图表3: 饼图 -->
            <div class="chart-container">
                <div class="chart-title">饼图</div>
                <div class="chart-wrapper">
                    <canvas id="chart3"></canvas>
                </div>
            </div>
            
            <!-- 图表4: 雷达图 -->
            <div class="chart-container">
                <div class="chart-title">雷达图</div>
                <div class="chart-wrapper">
                    <canvas id="chart4"></canvas>
                </div>
            </div>
            
            <!-- 图表5: 条形图 -->
            <div class="chart-container">
                <div class="chart-title">条形图</div>
                <div class="chart-wrapper">
                    <canvas id="chart5"></canvas>
                </div>
            </div>
            
            <!-- 图表6: 面积图 -->
            <div class="chart-container">
                <div class="chart-title">面积图</div>
                <div class="chart-wrapper">
                    <canvas id="chart6"></canvas>
                </div>
            </div>
            
            <!-- 图表7: 散点图 -->
            <div class="chart-container">
                <div class="chart-title">散点图</div>
                <div class="chart-wrapper">
                    <canvas id="chart7"></canvas>
                </div>
            </div>
            
            <!-- 图表8: 气泡图 -->
            <div class="chart-container">
                <div class="chart-title">气泡图</div>
                <div class="chart-wrapper">
                    <canvas id="chart8"></canvas>
                </div>
            </div>
            
            <!-- 图表9: 混合图 -->
            <div class="chart-container">
                <div class="chart-title">混合图</div>
                <div class="chart-wrapper">
                    <canvas id="chart9"></canvas>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 底部区域 -->
    <div class="footer">
        <p>© 2025 数据分析平台. 版权所有.</p>
    </div>

    <script>
        // 下拉菜单功能
        const dropdownTrigger = document.getElementById('dropdown-trigger');
        const dropdownMenu = document.getElementById('dropdown-menu');
        
        dropdownTrigger.addEventListener('click', function() {
            dropdownMenu.classList.toggle('show');
        });
        
        // 点击其他地方关闭下拉菜单
        document.addEventListener('click', function(event) {
            if (!dropdownTrigger.contains(event.target) && !dropdownMenu.contains(event.target)) {
                dropdownMenu.classList.remove('show');
            }
        });
        
        // 确保完全展示的配置
        const fullDisplayOptions = {
            responsive: true,
            maintainAspectRatio: false,
            layout: {
                padding: {
                    top: 10,
                    bottom: 15,
                    left: 10,
                    right: 10
                }
            },
            plugins: {
                legend: {
                    display: true,
                    position: 'bottom',
                    labels: {
                        boxWidth: 10,
                        font: {
                            size: 9
                        },
                        padding: 5
                    }
                }
            },
            scales: {
                x: {
                    ticks: {
                        font: {
                            size: 9
                        },
                        maxRotation: 45,
                        minRotation: 45
                    },
                    title: {
                        font: {
                            size: 9
                        },
                        padding: {top: 5}
                    },
                    grid: {
                        display: false
                    }
                },
                y: {
                    ticks: {
                        font: {
                            size: 9
                        },
                        padding: 5
                    },
                    title: {
                        font: {
                            size: 9
                        },
                        padding: {bottom: 5}
                    },
                    grid: {
                        drawBorder: false
                    }
                }
            },
            elements: {
                point: {
                    radius: 3,
                    hoverRadius: 4
                },
                line: {
                    tension: 0,
                    borderWidth: 1.5
                },
                bar: {
                    borderWidth: 1,
                    borderRadius: 2
                }
            }
        };

        // 图表1: 柱状图
        new Chart(document.getElementById('chart1'), {
            type: 'bar',
            data: {
                labels: ['第一季度', '第二季度', '第三季度', '第四季度'],
                datasets: [{
                    label: '销售额(万)',
                    data: [65, 59, 80, 81],
                    backgroundColor: 'rgba(75, 192, 192, 0.7)',
                    borderColor: 'rgba(75, 192, 192, 1)',
                    borderWidth: 1
                }]
            },
            options: fullDisplayOptions
        });

        // 图表2: 折线图
        new Chart(document.getElementById('chart2'), {
            type: 'line',
            data: {
                labels: ['1月', '2月', '3月', '4月', '5月', '6月'],
                datasets: [{
                    label: '访问量(千)',
                    data: [12, 19, 3, 5, 2, 3],
                    backgroundColor: 'rgba(255, 99, 132, 0.1)',
                    borderColor: 'rgba(255, 99, 132, 1)',
                    borderWidth: 1.5,
                    fill: true
                }]
            },
            options: fullDisplayOptions
        });

        // 图表3: 饼图
        new Chart(document.getElementById('chart3'), {
            type: 'pie',
            data: {
                labels: ['产品A', '产品B', '产品C', '产品D'],
                datasets: [{
                    data: [30, 25, 20, 25],
                    backgroundColor: [
                        'rgba(255, 99, 132, 0.7)',
                        'rgba(54, 162, 235, 0.7)',
                        'rgba(255, 206, 86, 0.7)',
                        'rgba(75, 192, 192, 0.7)'
                    ],
                    borderWidth: 1
                }]
            },
            options: {
                ...fullDisplayOptions,
                plugins: {
                    ...fullDisplayOptions.plugins,
                    legend: {
                        ...fullDisplayOptions.plugins.legend,
                        position: 'right'
                    }
                }
            }
        });

        // 图表4: 雷达图
        new Chart(document.getElementById('chart4'), {
            type: 'radar',
            data: {
                labels: ['销售能力', '市场推广', '产品研发', '客户服务', '财务管理', '人力资源'],
                datasets: [{
                    label: '部门评估',
                    data: [65, 59, 90, 81, 56, 55],
                    backgroundColor: 'rgba(153, 102, 255, 0.2)',
                    borderColor: 'rgba(153, 102, 255, 1)',
                    pointBackgroundColor: 'rgba(153, 102, 255, 1)',
                    pointBorderColor: '#fff',
                    pointHoverRadius: 4
                }]
            },
            options: fullDisplayOptions
        });

        // 图表5: 条形图
        new Chart(document.getElementById('chart5'), {
            type: 'bar',
            data: {
                labels: ['北京地区', '上海地区', '广州地区', '深圳地区', '杭州地区'],
                datasets: [{
                    label: '用户数量',
                    data: [1200, 1900, 800, 1500, 900],
                    backgroundColor: 'rgba(54, 162, 235, 0.7)'
                }]
            },
            options: {
                ...fullDisplayOptions,
                indexAxis: 'y',
                scales: {
                    ...fullDisplayOptions.scales,
                    y: {
                        ...fullDisplayOptions.scales.y,
                        ticks: {
                            ...fullDisplayOptions.scales.y.ticks,
                            maxRotation: 0,
                            minRotation: 0
                        }
                    }
                }
            }
        });

        // 图表6: 面积图
        new Chart(document.getElementById('chart6'), {
            type: 'line',
            data: {
                labels: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日'],
                datasets: [{
                    label: '网站流量(千)',
                    data: [1200, 1900, 1700, 2100, 2000, 2500, 2200],
                    backgroundColor: 'rgba(255, 159, 64, 0.2)',
                    borderColor: 'rgba(255, 159, 64, 1)',
                    borderWidth: 1.5,
                    fill: true
                }]
            },
            options: fullDisplayOptions
        });

        // 图表7: 散点图
        new Chart(document.getElementById('chart7'), {
            type: 'scatter',
            data: {
                datasets: [{
                    label: '价格与销量',
                    data: [
                        {x: 10, y: 20}, {x: 15, y: 18}, {x: 20, y: 15},
                        {x: 25, y: 12}, {x: 30, y: 8}, {x: 35, y: 5}
                    ],
                    backgroundColor: 'rgba(255, 99, 132, 0.7)',
                    pointRadius: 4
                }]
            },
            options: {
                ...fullDisplayOptions,
                scales: {
                    x: {
                        ...fullDisplayOptions.scales.x,
                        title: { 
                            display: true, 
                            text: '价格($)',
                            font: { size: 9 }
                        }
                    },
                    y: {
                        ...fullDisplayOptions.scales.y,
                        title: { 
                            display: true, 
                            text: '销量(千)',
                            font: { size: 9 }
                        }
                    }
                }
            }
        });

        // 图表8: 气泡图
        new Chart(document.getElementById('chart8'), {
            type: 'bubble',
            data: {
                datasets: [{
                    label: '市场分析',
                    data: [
                        {x: 20, y: 30, r: 8}, 
                        {x: 40, y: 10, r: 12},
                        {x: 30, y: 20, r: 15}, 
                        {x: 10, y: 40, r: 10}
                    ],
                    backgroundColor: 'rgba(54, 162, 235, 0.7)'
                }]
            },
            options: {
                ...fullDisplayOptions,
                scales: {
                    x: {
                        ...fullDisplayOptions.scales.x,
                        title: { 
                            display: true, 
                            text: '市场份额(%)',
                            font: { size: 9 }
                        }
                    },
                    y: {
                        ...fullDisplayOptions.scales.y,
                        title: { 
                            display: true, 
                            text: '增长率(%)',
                            font: { size: 9 }
                        }
                    }
                }
            }
        });

        // 图表9: 混合图
        new Chart(document.getElementById('chart9'), {
            data: {
                labels: ['1月', '2月', '3月', '4月', '5月', '6月'],
                datasets: [
                    {
                        type: 'bar',
                        label: '实际销量',
                        data: [12, 19, 3, 5, 2, 3],
                        backgroundColor: 'rgba(54, 162, 235, 0.7)',
                        borderColor: 'rgba(54, 162, 235, 1)',
                        borderWidth: 1
                    },
                    {
                        type: 'line',
                        label: '目标销量',
                        data: [10, 15, 8, 12, 8, 10],
                        backgroundColor: 'rgba(255, 99, 132, 0.1)',
                        borderColor: 'rgba(255, 99, 132, 1)',
                        borderWidth: 1.5,
                        pointRadius: 3
                    }
                ]
            },
            options: fullDisplayOptions
        });
    </script>
</body>
</html>